<template>
  <div>
    <div style="margin-bottom: 5px">
      <el-input v-model="title" placeholder="请输入标题" suffix-icon="el-icon-search" style="width: 200px"
                @keyup.enter.native="search"></el-input>
      <el-button type="primary" style="margin-left: 5px" @click="search">查询</el-button>
      <el-button type="success" @click="resetParam">重置</el-button>
    </div>
    <el-table :data="tableData"
              :header-cell-style="{background:'#f2f5fc',color:'#555'}"
              border>
      <el-table-column prop="title" label="标题" width="100">
      </el-table-column>
      <el-table-column prop="content" label="内容" width="160">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="80">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.status === 0 ? 'danger' : 'success'"
              disable-transitions>{{ scope.row.status === 0 ? '未读' : '已读' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="senderName" label="发送者" width="120">
      </el-table-column>
      <el-table-column prop="receiver" label="接收者Id" width="80">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="上次修改时间" width="200">
        <template slot-scope="scope">
          {{ formatDateTime(scope.row.updateTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="mod(scope.row)">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="del(scope.row.messageId)" style="margin-left: 5px">
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 20,30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"-->
    </el-pagination>

    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        @close="flag=0"
        width="30%"
        center>

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="信息Id" prop="messageId">
          <el-col :span="20">
            <el-input v-model="form.messageId" disabled></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-col :span="20">
            <el-input v-model="form.title"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-col :span="20">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deleteById, getAllMessage, selectByTitle, updateC} from "@/api/messaage";

export default {
  name: "MessageManage",
  data() {
    return {
      flag: 0,
      tableData: [],
      title: '',
      centerDialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      name: '',
      form: {
        messageId: "",
        content: "",
        title: "",
      }
    }
  },
  methods: {
    restForm() {
      this.$refs.form.resetFields();
    },
    search() {
      if (this.title != null && this.title !== '') {
        console.log(this.title)
        selectByTitle({
          title: this.title
        }).then((res) => {
          if (res.flag == true) {
            this.tableData = res.data
            this.total = res.data.length
            console.log(this.tableData + "  " + this.total)
          } else {
            alert("获取数据失败")
          }
        })
      } else {
        this.loadPost()
      }
    },
    mod(row) {
      console.log(row)

      this.centerDialogVisible = true
      this.$nextTick(() => {
        //要赋值到表单
        this.form.messageId = row.messageId
        this.form.title = row.title
        this.form.content = row.content
      })
    },
    del(id) {
      console.log(id)
      deleteById({
        id: id
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success("删除成功")
          this.loadPost()
        } else {
          this.$message.error(res.data);
        }
      })
    },
    doMod() {
      updateC({
        messageId: this.form.messageId,
        title: this.form.title,
        content: this.form.content,
      }).then((res) => {
        if (res.flag == true) {
          this.$message.success("修改成功");
          this.centerDialogVisible = false
          this.loadPost()
        } else {
          this.$message.error(res.data);
        }
      })
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.doMod()
          console.log("修改")
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = 1;
      this.pageSize = val;
      this.loadPost()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.loadPost()
    },
    resetParam() {
      this.title = ''
    },
    loadPost() {
      this.flag = 0
      getAllMessage({}).then((res) => {
        if (res.flag == true) {
          this.tableData = res.data
          console.log(this.tableData)
          this.total = res.data.length
        } else {
          alert("获取数据失败")
        }
      })
    },
    formatDateTime(dateTimeString) {
      const backendDate = new Date(dateTimeString);
      const year = backendDate.getFullYear();
      const month = String(backendDate.getMonth() + 1).padStart(2, '0');
      const day = String(backendDate.getDate()).padStart(2, '0');
      const hours = String(backendDate.getHours()).padStart(2, '0');
      const minutes = String(backendDate.getMinutes()).padStart(2, '0');
      const seconds = String(backendDate.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
  beforeMount() {
    this.loadPost()
    console.log(this.$store.getters.isAdmin)
  }
}
</script>

<style scoped>

</style>